<!DOCTYPE html>
<html lang="en" xmlns:http="http://www.w3.org/1999/xhtml" xmlns: xmlns:>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"
    />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>福山</title>
    <link rel="stylesheet" type="text/css" href="../css/common.css" />
    <link rel="stylesheet" type="text/css" href="../css/element/elemet-ui.css" />
    <link rel="stylesheet" type="text/css" href="../css/swiper/swiper-4.1.6.min.css" />
    <link rel="stylesheet" type="text/css" href="../css/rem.css" />
    <link rel="stylesheet" href="../js/map/DrawingManager_min.css">
    <link rel="stylesheet" href="../assets/fonts/iconfont/iconfont.css">
    <link href="../assets/css/GA.css" type="text/css" rel="stylesheet">
    <style scoped>
        
        #app {
            width: 100vw;
            height: 100vh;
            display: flex;
            flex-direction: column;
            flex-wrap: nowrap;
        }

        .pubHead {
            width: 100%;
            height: 80px;
            padding-left: 40px;
            box-sizing: border-box;
            background-color: #011a42;
        }

        .log {
            float: left;
            width: 40px;
            height: 42px;
            margin-top: 19px;
            background: url('../image/logo.png') no-repeat;
        }

        .logtitle {
            float: left;
            margin-left: 10px;
            height: 80px;
            line-height: 80px;
            width: auto;
            font-size: 22px;
            color: #79afff;
        }

        .tabUl {
            float: left;
            margin-left: 285px;
            overflow: hidden;
        }

        .tabUl li {
            float: left;
            padding: 0px 20px;
            height: 80px;
            line-height: 80px;
            color: #79afff;
            font-size: 18px;
            cursor: pointer;
        }

        .tabUl li.li_active {
            height: 77px;
            font-size: 18px;
            line-height: 80px;
            border-bottom: 3px solid #0070ff;
        }

        .main {
            flex: 1;
            background: #002759;
            width: 100%;
            padding: 0px 28px;
            box-sizing: border-box;
            display: flex;
            flex-direction: column;
            flex-wrap: nowrap;
        }

        .top {
            width: 100%;
            height: 70px;
        }

        .top>span {
            height: 70px;
            line-height: 70px;
            display: inline-block;
            /* float: left; */
            margin-left: 10px;
            font-size: 18px;
            color: #79afff;
        }

        .top .circle {
            width: 8px;
            height: 8px;
            background-color: #0070ff;
            margin-top: 30px;
            margin-left: 15px;
        }

        .top .endspan {
            color: rgba(71, 205, 254, 1);
        }

        .main_body {
            width: 100%;
            flex: 1;
            display: flex;
            margin-bottom: 20px;
            border-radius: 6px;
            position: relative;
        }

        .map {
            width: 100%;
            height: 100%;
            float: left;
            background: #ffffff;
        }

        .op-box {
            position: absolute;
            top: 5%;
            right: 2%;
            width: 590px;
            height: 90%;
            min-height: 600px;
            background: rgba(11, 37, 84, 1);
            opacity: 0.98;
            border-radius: 4px;
            z-index: 99999;
        }

        .op-top {
            position: relative;
            width: 590px;
            height: 70px;
            background: rgba(5, 57, 122, 1);
        }

        .top-s {
            position: absolute;
            right: 10px;
            top: 15px;
            z-index: 10000;
        }

        .top-name {
            height: 70px;
            line-height: 70px;
            width: 216px;
            font-size: 18px;
            font-family: MicrosoftYaHei;
            color: rgba(71, 205, 254, 1);
            float: left;
            margin-left: 20px;
        }

        .box-select {
            height: 46px;
            line-height: 46px;
            background: rgba(0, 41, 92, 1);
            font-family: MicrosoftYaHei;
            color: rgba(71, 205, 254, 1);
            float: left;
            margin-top: 20px;
            margin-left: 20px;
            font-size: 16px;
        }

        .box-echart {
            width: 90%;
            height: 400px;
            float: left;
            margin-left: 5%;
            margin-top: 20px;
        }

        .echart {
            width: 100%;
            height: 100%;
        }

        .el-select-dropdown {
            z-index: 99999 !important;
        }

        .el-cascader-menus {
            z-index: 99999 !important;
        }

        .pointer-box {
            position: absolute;
            top: 10px;
            left: 10px;
            width: 210px;
            height: 50px;
            background: rgba(5, 57, 122, 1);
            color: #ffffff;
            display: flex;
            justify-content: space-between;
        }

        .pointer-box i {
            height: 50px;
            line-height: 50px;
            width: 70px;
            text-align: center;
            cursor: pointer;
            font-size: 28px;
        }

        .icon-signal2xinhao {
            color: #47CDFE;
        }

        .icon-wangluoxinhao {
            color: #00CC66;
        }

        .icon-wifixinhao {
            color: #FFA200;
        }
        .el-input__inner:hover{
            border: 0px solid #056DAD;
            background-color: #00295C;
            color: rgb(0, 174, 244);
        }

        .el-input__inner{
            border: 1px solid #056DAD;
            background-color: #00295C;
            color: rgb(0, 174, 244);
        }
        .el-input__inner::placeholder{
            color: rgb(0, 174, 244);
        }
        .test .el-input__inner:hover{
            border: 0px solid #056DAD;
            background-color: #00295C;
            color: rgb(0, 174, 244);
        }

        .test .el-input__inner{
            border: 1px solid #056DAD;
            background-color: #00295C;
            color: rgb(0, 174, 244);
        }
        .el-cascader__label{
            color: rgb(0, 174, 244);
        }
    </style>
</head>

<body>
    <div id="app" v-cloak>
        <div id="pubHead" class="pubHead">
            <div class="log"></div>
            <div class="logtitle">福山公安数据治理系统</div>
            <ul class="tabUl">
                <li :class="{'li_active':activeIndex === index}" v-for="(item, index) in menuList" :key="index" @click="routerGo(item)">{{item.name}}
                </li>
                <!-- <li :class="{'li_active':activeIndex === 1}">数据源注册</li>
            <li>数据采集任务管理</li>
            <li>数据采集监控</li>
            <li>录入工具</li>
            <li>资源目录</li> -->
            </ul>
        </div>
        <div class="main">
            <div class="top">
                <span class="circle"></span>
                <span>智能作战系统</span>
                <span>></span>
                <span>地界防控</span>
                <span>></span>
                <span class="endspan">外来人口驻留分析</span>
                <el-button type="primary" size="mini" @click="goBack" style="position:absolute;right:5rem;margin-top:1rem">
                    返回
                </el-button>
            </div>
            <div class="main_body">
                <div class="map" id="map">
                    <my-map ref="mymap" :electricitypoints="electricityPoints" :probepoints="probePoints"></my-map>
                </div>
                <div class="pointer-box">
                    <i class="iconfont icon-signal2xinhao" @click="isShowProbe" title="显示探针"></i>
                    <i class="iconfont icon-wangluoxinhao" @click="isShowEle" title="显示电围"></i>
                    <i class="iconfont icon-wifixinhao"></i>
                </div>
                <div class="op-box">
                    <div class="op-top">
                        <div class="top-name">外来人口驻留区域人次排行</div>
                        <div class="top-s">
                            <el-select v-model="timeValue" placeholder="请选择时间段" clearable @change="chooseTime">
                                <el-option v-for="item in timeOptions" :key="item.value" :label="item.label" :value="item.value">
                                </el-option>
                            </el-select>
                        </div>
                    </div>
                    <div class="box-select">
                        <span style="margin-left: 30px;">人次排名</span>
                        <el-cascader size="large" :options="provinceAndCityData" clearable v-model="place" style="margin-left: 15px" @change="choosePlace"
                            style="width: 240px">
                        </el-cascader>
                        <!--<el-select v-model="value" placeholder="请选择省">-->
                        <!--<el-option-->
                        <!--v-for="item in options"-->
                        <!--:key="item.value"-->
                        <!--:label="item.label"-->
                        <!--:value="item.value">-->
                        <!--</el-option>-->
                        <!--</el-select>-->
                        <!--<el-select v-model="value" placeholder="请选择市">-->
                        <!--<el-option-->
                        <!--v-for="item in options"-->
                        <!--:key="item.value"-->
                        <!--:label="item.label"-->
                        <!--:value="item.value">-->
                        <!--</el-option>-->
                        <!--</el-select>-->
                    </div>
                    <div class="box-echart">
                        <div class="echart" id="echart">

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- 引入组件库 -->
    <script type="text/javascript" src="../js/vue/vue.js"></script>
    <script src="../js/jquery-3.0.0.min.js.js"></script>
    <script type="text/javascript" src="../js/element/element.js"></script>
    <script type="text/javascript" src="../js/urls.js"></script>
    <script src="../js/areaData.js"></script>
    <script src="../js/map/baiduInterface.js"></script>
    <script src="../js/mymap.js"></script>
    <script src="../js/axios.js"></script>
    <script type="text/javascript" src="../js/utils.js"></script>
    <script src="../js/echarts.min.js"></script>
    <script src="../js/china.js"></script>
    <script type="text/javascript">
        //    var echarts = require('echarts');
        var vm;
        vm = new Vue({
            el: '#app',
            data: {
                timeValue: '',
                menuList: [{
                    name: '归属地查询',
                    path: './attributionSearch.html'
                },
                {
                    name: '外来人口监测',
                    path: './externalPeople.html'
                },
                {
                    name: '外来人口驻留分析',
                    path: './peopleAnalyse.html'
                },
                {
                    name: '人口流向分析',
                    path: './populationAnalysis.html'
                }
                ],
                activeIndex: 2,
                timeOptions: [{
                    value: '1',
                    label: '最近一天'
                },
                {
                    value: '2',
                    label: '最近一周'
                },
                {
                    value: '3',
                    label: '最近一月'
                }
                ],
                value: '',
                place: null,
                code: '',
                data: [],
                num: [],
                electricityPoints: [],
                probePoints: [],
                electricityFlag: false,
                probeFlag: false,

            },
            created() {

            },
            mounted() {
                //            this.initEchart()
                // this.getData()
                this.electricityPoints = [{}]
                this.probePoints = [{}]
            },
            methods: {
                routerGo(item) {
                    window.location.href = item.path
                },
                isShowEle() {
                    if (!this.electricityFlag) {
                        this.showElectricity()
                        this.electricityFlag = !this.electricityFlag
                    } else {
                        this.$refs.mymap.clearElectricity()
                        this.electricityFlag = !this.electricityFlag
                    }
                },
                showElectricity() {
                    let self = this
                    let options = {
                        method: 'GET',
                        url: 'collect/findWifi',
                        data: {
                            type: '2'
                        }
                    }
                    self.$HttpUtil(
                        options,
                        res => {
                            if (res.code === 0) {
                                console.log(res.data)
                                self.electricityPoints = res.data.map(val => {
                                    return {
                                        lng: val.lng,
                                        lat: val.lat,
                                        id: val.device_code,
                                        address: val.address,
                                        factoryName: val.factory_name,
                                        source: val.source
                                    }
                                })
                            } else {
                                self.$NotifyUtil({
                                    type: 'error',
                                    message: res.msg
                                })
                            }
                        },
                        err => {
                            console.log(JSON.stringify(err))
                        }
                    )
                },
                isShowProbe() {
                    if (!this.probeFlag) {
                        this.showProbe()
                        this.probeFlag = !this.probeFlag
                    } else {
                        this.$refs.mymap.clearProbe()
                        this.probeFlag = !this.probeFlag
                    }
                },
                showProbe() {
                    let self = this
                    let options = {
                        method: 'GET',
                        url: 'collect/findWifi',
                        data: {
                            type: '1'
                        }
                    }
                    self.$HttpUtil(
                        options,
                        res => {
                            if (res.code === 0) {
                                self.probePoints = res.data.map(val => {
                                    return {
                                        lng: val.lng,
                                        lat: val.lat,
                                        id: val.device_code,
                                        address: val.address,
                                        factoryName: val.factory_name,
                                        source: val.source
                                    }
                                })
                            } else {
                                self.$NotifyUtil({
                                    type: 'error',
                                    message: res.msg
                                })
                            }
                        },
                        err => {
                            console.log(JSON.stringify(err))
                        }
                    )
                },
                chooseTime(val) {
                    // this.getData()
                },
                choosePlace(val) {
                    this.code = val[1]
                    // this.getData()
                },
                //查询当前区域时间下的人口统计
                getData() {
                    let data = {
                        type: this.timeValue,
                        code: this.code
                    }
                    let option = {
                        method: 'POST',
                        url: 'collect/statistics/getData',
                        data: data
                    }
                    this.$HttpUtil(option, res => {
                        console.log(res)
                        let data = res.data
                        let arrX = []
                        let arrY = []
                        for (let item of data) {
                            arrX.push(item.personNum)
                            arrY.push(item.communityName)
                        }
                        this.data = arrY
                        this.num = arrX
                        this.initEchart()
                    })


                },
                initEchart() {
                    let myChart = echarts.init(document.getElementById('echart'));
                    let option = {
                        tooltip: {
                            trigger: 'axis',
                            axisPointer: {
                                type: 'shadow'
                            }
                        },
                        color: '#0162A6',
                        textStyle: {
                            color: '#0162A6'
                        },
                        grid: {
                            left: '3%',
                            right: '4%',
                            bottom: '3%',
                            containLabel: true
                        },
                        xAxis: {
                            type: 'value',
                            boundaryGap: [0, 0.01],
                            splitLine: {
                                show: true,
                                lineStyle: {
                                    color: ['#056DAD']
                                }
                            },
                            axisLine: {
                                lineStyle: {
                                    color: '#056DAD'
                                }
                            }
                        },
                        yAxis: {
                            type: 'category',
                            data: this.data,
                            axisLine: {
                                lineStyle: {
                                    color: '#056DAD'
                                }
                            }
                        },
                        series: [{
                            type: 'bar',
                            data: this.num,
                            areaStyle: {
                                normal: {
                                    color: '#17EAD9'
                                }
                            },
                        }]
                    };
                    myChart.setOption(option);
                },
                initMap() {

                },
                goBack() {
                    // 返回bigHome
                    window.location.href = 'bigHome2.html'
                    // this.$router.push('bigHome')
                }

            },
            filters: {
                areaFilter(val) {
                    return CodeToText[val]
                }
            },
            watch: {}
        })
    </script>
</body>

</html>